<template>
  <div>
    <breadcrumb :items="breadcrumbs" />
    <a-card class="Pcard-box">
      <tabs @change="tabChange" :items="tabs" v-if="tabsPosition == 'form'" />
      <a-row class="tittle-box">
        <slot name="form"> </slot>
      </a-row>
      <a-row style="padding: 10px">
        <action-btns :btns="actionBtns" @click="btnClick" />
        <slot name="actionBtns" />
      </a-row>
      <tabs @change="tabChange" :items="tabs" v-if="tabsPosition == 'table'" />
      <a-row class="MT10">
        <slot name="table" />
      </a-row>
    </a-card>
  </div>
</template>

<script>
import ActionBtns from '@/components/base/ActionBtns'
import Breadcrumb from '@/components/base/Breadcrumb'
import Tabs from '@/components/base/Tabs'

export default {
  components: { Breadcrumb, ActionBtns, Tabs },
  props: {
    breadcrumbs: {
      type: Array,
      default: () => []
    },
    tabs: {
      type: Array,
      default: () => []
    },
    tabsPosition: {
      type: String,
      default: 'form'
    },
    actionBtns: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    btnClick (key) {
      this.$emit('click', key)
    },
    tabChange (key) {
      this.$emit('tabChange', key)
    }
  }
}
</script>

<style></style>
